<template>
  <div class="goods-add">
    <!-- 步骤条 -->
    <el-steps :active="active">
    <el-step title="步骤 1" description="基本信息"></el-step>
    <el-step title="步骤 2" description="商品图片"></el-step>
    <el-step title="步骤 3" description="商品内容"></el-step>
  </el-steps>
  <!-- 标签页 -->
  <el-tabs tab-position="left" style="height: 100%;" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="tab0">
      <el-form ref="productForm" :model="productForm">
        <el-form-item label="商品名称" label-width='80px'>
          <el-input placeholder="请输入商品名称" v-model="productForm.goods_name"></el-input>
        </el-form-item>
          <el-form-item label="商品价格" label-width='80px'>
          <el-input placeholder="请输入商品价格" v-model="productForm.goods_price"></el-input>
        </el-form-item>
          <el-form-item label="商品重量" label-width='80px'>
          <el-input placeholder="请输入商品重量" v-model="productForm.goods_weight"></el-input>
        </el-form-item>
          <el-form-item label="商品数量" label-width='80px'>
          <el-input placeholder="请输入商品数量" v-model="productForm.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" label-width='80px'>
           <el-cascader
            v-model="productForm.goods_cat"
            :options="options"
            :props="props"
            >
            </el-cascader>
        </el-form-item>
        <el-button type="success" @click="next">下一步</el-button>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="商品图片" name="tab1">
      <el-upload
        :action="$axios.defaults.baseURL + 'upload'"
        list-type="picture-card"
        multiple
        :headers = "headers"
        :on-success="handleSuccess"
        :before-upload="handleBefore"
        :before-remove="handleRemove"
        :on-preview="handlePictureCardPreview"
        >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-button type="success" @click="next">下一部</el-button>
    </el-tab-pane>
    <el-tab-pane label="商品内容" name="tab2">
        <quill-editor v-model="productForm.goods_introduce"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)">
        </quill-editor>
        <el-button type="success" @click="submitOK">完成</el-button>
    </el-tab-pane>
  </el-tabs>
  <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      productForm: {
        goods_name: '',
        goods_cat: [],
        goods_price: '',
        goods_number: '',
        goods_weight: '',
        goods_introduce: '',
        pics: [
        ]
      },
      options: [],
      props: {
        label: 'cat_name',
        value: 'cat_id'
      },

      activeName: 'tab0',
      active: 0,

      headers: {
        Authorization: localStorage.getItem('token')
      },
      dialogImageUrl: '',
      dialogVisible: false,
      editorOption: {

      }
    }
  },
  created () {
    this.getCategory()
  },
  methods: {
    async  getCategory () {
      const { data } = await this.$axios.get('categories?type=3')
      this.options = data
    },
    handleClick () {
      // this.active = this.activeName.slice('tab')
      this.active = +this.activeName.slice(3)
    },
    next () {
      this.active++
      this.activeName = 'tab' + this.active++
    },
    handleSuccess (response, file, fileList) {
      const { data, meta } = response
      if (meta.status === 200) {
        this.$message.success(meta.msg)
        this.productForm.pics.push(
          { pic: data.tmp_path }
        )
      }
    },
    handleBefore (file) {
      console.log(file)
      const fileType = file.type === 'image/png'
      const size = file.size / 1024 / 1024 < 2
      if (!fileType) {
        this.$message.error('上传文件格式不对')
      }
      if (!size) {
        this.$message.error('上传文件过大')
      }
      return fileType && size
    },
    handleRemove (file, fileList) {
      console.log(file)
      console.log(fileList)
      const pic = file.response.data.tmp_path
      console.log(pic)
      this.productForm.pics = this.productForm.pics.filter(i => i.pic !== pic)
    },
    handlePictureCardPreview (file) {
      console.log(file)
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    onEditorBlur (quill) {
    },
    onEditorFocus (quill) {
      console.log(2)
    },
    onEditorReady (quill) {
      console.log(3)
    },
    async submitOK () {
      console.log(1)
      const res = await this.$axios.post('goods', {
        goods_name: this.productForm.goods_name,
        goods_cat: this.productForm.goods_cat.join(','),
        goods_price: this.productForm.goods_price,
        goods_number: this.productForm.goods_number,
        goods_weight: this.productForm.goods_weight,
        goods_introduce: this.productForm.goods_introduce,
        pics: this.productForm.pics
        // this.productForm

      })
      console.log(res)
    }

  }

}
</script>

<style lang="less" scoped >
#app {
      .el-tab-pane{
        /deep/ .ql-editor {
        background-color: #fff;
          height: 300px;
        }
      }
   }
</style>
